<template>
    <div class="page">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-read"></i> 成绩录入通道管理 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="switch">
                <span class="text">成绩录入通道</span>
                <el-switch
                    style="display: inline-block;margin: 5px;"
                    v-model="openGradeInput"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="打开"
                    inactive-text="关闭"
                    @change="changeGradeInput"
                >
                </el-switch>
                <span class="text">成绩选课通道</span>
                <el-switch
                    style="display: inline-block"
                    v-model="openClassSelect"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="打开"
                    inactive-text="关闭"
                    @change="changeClassSelect"
                >
                </el-switch>
            </div>
            <div class="operating">
                <el-date-picker
                    :picker-options="years"
                    v-model="year"
                    @change="queryOpenChange"
                    :clearable="false"
                    value-format="yyyy"
                    format="yyyy"
                    type="year"
                    placeholder="学年"
                >
                </el-date-picker>
                <el-select ref="term" v-model="term" placeholder="学期" @change="queryOpenChange" class="handle-select mr10">
                    <el-option value="1" label="第一学期"> </el-option>
                    <el-option value="2" label="第二学期"> </el-option>
                </el-select>
                <el-button type="success" @click="addBeginClass">新增</el-button>
            </div>
            <div>
                <el-table :data="classTable" border class="table" header-cell-class-name="table-header" v-loading="tableOpenClassLoading">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="面向年级">
                                    <span>{{ props.row.grade }}</span>
                                </el-form-item>
                                <el-form-item label="已选课人数">
                                    <span>{{ props.row.have_selected_person }}</span>
                                </el-form-item>
                                <el-form-item label="最大选课人数">
                                    <span>{{ props.row.max_selected_person }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column prop="course_id" label="开课id" align="center"></el-table-column>
                    <el-table-column prop="course_name" label="课程名"></el-table-column>
                    <el-table-column prop="course_credit" label="学分"></el-table-column>
                    <el-table-column prop="course_address" label="上课地点"></el-table-column>
                    <el-table-column prop="course_college" label="开课学院" width="150"></el-table-column>
                    <el-table-column prop="course_nature" label="课程性质"></el-table-column>
                    <el-table-column prop="course_teacher" label="授课老师"></el-table-column>
                    <el-table-column prop="course_term" label="开课学期">
                        <template slot-scope="scope">
                            {{ scope.row.course_term === '1' ? '第一学期' : '第二学期' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="course_time" label="学时"></el-table-column>
                    <el-table-column prop="course_year" label="开课学年"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" @click="editBeginClass(scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="grade" label="面向年级"></el-table-column>
                    <el-table-column prop="have_selected_person" label="已选课人数"></el-table-column>
                    <el-table-column prop="max_selected_person" label="最大选课人数"></el-table-column> -->
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination
                    background
                    layout="sizes, prev, pager, next"
                    :page-count="classPages"
                    :page-sizes="[5, 10, 20, 30]"
                    :page-size="itemOfPage"
                    :current-page.sync="currentPage"
                    @size-change="handleBeginClassSizeChange"
                    @current-change="handleBeginClassPageChange"
                >
                </el-pagination>
            </div>
        </div>
        <div>
            <el-dialog title="选择课程" :visible.sync="dialogCourseVisible">
                <div class="search">
                    <el-select
                        clearable
                        size="medium"
                        v-model="college"
                        value-key="college_id"
                        placeholder="学院"
                        @change="queryChange"
                        @clear="queryClear"
                        class="handle-select mr10"
                    >
                        <el-option v-for="item in colleges" :key="item.college_id" :label="item.college_name" :value="item"> </el-option>
                    </el-select>
                    <el-select
                        clearable
                        v-model="nature"
                        value-key="nature_id"
                        placeholder="课程类型"
                        @change="queryChange"
                        @clear="queryClear"
                        class="handle-select mr10"
                    >
                        <el-option v-for="item in natures" :key="item.nature_id" :label="item.nature_name" :value="item"> </el-option>
                    </el-select>
                </div>
                <el-table
                    ref="courseTable"
                    highlight-current-row
                    @current-change="handleCurrentCourseChange"
                    :data="courseData"
                    v-loading="courseLoading"
                >
                    <el-table-column property="course_id" label="课程id" width="150"></el-table-column>
                    <el-table-column property="course_name" label="课程名" width="200"></el-table-column>
                    <el-table-column property="college.college_name" label="课程内容"></el-table-column>
                    <el-table-column property="nature.nature_name" label="课程类型">
                        <template slot-scope="scope">
                            <el-tag
                                :type="scope.row.nature.nature_id == 1 ? 'danger' : scope.row.nature.nature_id == 2 ? 'primary' : 'info'"
                            >
                                {{ scope.row.nature.nature_name }}
                            </el-tag>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                        background
                        layout="sizes, prev, pager, next"
                        :page-count="coursePages"
                        :page-sizes="[5, 10, 20]"
                        :page-size="coursePageSize"
                        :current-page.sync="courseCurrentPage"
                        @size-change="handleCourseSizeChange"
                        @current-change="handleCourseCurrentPageChange"
                    >
                    </el-pagination>
                </div>
                <div class="step-btn">
                    <el-button @click="nextStep(1)" type="primary">下一步</el-button>
                </div>
            </el-dialog>
            <el-dialog title="选择老师" :visible.sync="dialogTeacherVisible">
                <el-table
                    ref="teacherTable"
                    :data="teacherData"
                    v-loading="teacherLoading"
                    highlight-current-row
                    @current-change="handleCurrentTeacherChange"
                >
                    <el-table-column property="id" label="教师id" width="150"></el-table-column>
                    <el-table-column property="name" label="姓名" width="200"></el-table-column>
                    <el-table-column property="gender" label="性别">
                        <template slot-scope="scope">
                            {{ scope.row.gender == '0' ? '男' : '女' }}
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                        background
                        layout="sizes, prev, pager, next"
                        :page-count="teacherPages"
                        :page-sizes="[5, 10, 20]"
                        :page-size="teacherPageSize"
                        :current-page.sync="teacherCurrentPage"
                        @size-change="handleTeacherSizeChange"
                        @current-change="handleTeacherCurrentPageChange"
                    >
                    </el-pagination>
                </div>
                <div class="step-btn">
                    <el-button @click="lastStep(0)" type="primary">上一步</el-button>
                    <el-button @click="nextStep(2)" type="primary">下一步</el-button>
                </div>
            </el-dialog>
            <el-dialog title="新增开课信息" :visible.sync="dialogAddClassVisible" width="32%">
                <el-form :model="form" label-width="100px">
                    <el-form-item label="上课地点">
                        <el-select v-model.number="form.address_id" placeholder="上课地点">
                            <el-option v-for="item in address" :key="item.id" :label="item.address_name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开课学年">
                        <el-select v-model.number="form.year" placeholder="开课学年">
                            <el-option :value="currentYear" disabled></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="学期">
                        <el-select v-model="form.term" placeholder="选择学期">
                            <el-option value="1" label="第一学期"></el-option>
                            <el-option value="2" label="第二学期"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="面向年级">
                        <el-select v-model.number="form.grade" placeholder="面向年级">
                            <el-option v-for="grade in currentGrades" :key="grade" :value="grade"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="最大选课人数">
                        <el-input v-model.number="form.max_selected_person" type="number"></el-input>
                    </el-form-item>
                </el-form>
                <div class="step-btn">
                    <el-button @click="lastStep(1)" type="primary">上一步</el-button>
                    <el-button @click="complete" type="primary">完成</el-button>
                </div>
            </el-dialog>
            <el-dialog title="编辑开课信息" :visible.sync="dialogEditClassVisible" width="32%">
                <el-form :model="editForm" label-width="100px">
                    <el-form-item label="上课地点" prop="address_id">
                        <el-select v-model.number="editForm.address_id" placeholder="上课地点">
                            <el-option v-for="item in address" :key="item.id" :label="item.address_name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开课学年" prop="year">
                        <el-select v-model.number="editForm.year" placeholder="开课学年">
                            <el-option :value="currentYear" disabled></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="学期">
                        <el-select v-model.number="editForm.term" placeholder="选择学期">
                            <el-option :value="1" label="第一学期"></el-option>
                            <el-option :value="2" label="第二学期"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="面向年级" prop="grade">
                        <el-select v-model.number="editForm.grade" placeholder="面向年级">
                            <el-option v-for="grade in currentGrades" :key="grade" :value="grade"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="最大选课人数" prop="max_selected_person">
                        <el-input v-model.number="editForm.max_selected_person" type="number"></el-input>
                    </el-form-item>
                </el-form>
                <div class="step-btn">
                    <el-button @click="confirmEdit" type="primary">确认</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { getRequest } from '@/api/index';
import { postRequest } from '@/api/index';

export default {
    data() {
        return {
            classTable: [],
            tableOpenClassLoading: false,
            classPages: 5,
            openGradeInput: false,
            openClassSelect: false,
            // 学期
            term: '1',
            // 学年
            year: '2020',
            years: {
                disabledDate: time => {
                    // 不能选择今天之后的年
                    let now = new Date();
                    return time.getFullYear() > now.getFullYear();
                }
            },
            // 上课地点
            address: [],
            currentYear: 2020,
            currentGrades: [],
            currentPage: 1,
            itemOfPage: 10,
            // 课程的数据
            courseData: [],
            // 控制课程的dialog显示
            dialogCourseVisible: false,
            // 课程table的loading控制
            courseLoading: false,
            // 课程表格的页数
            courseCurrentPage: 1,
            // 课程表格总页数
            coursePages: 5,
            // 课程表格size控制
            coursePageSize: 10,
            teacherPageSize: 10,
            teacherCurrentPage: 1,
            teacherPages: 5,
            teacherData: [],
            teacherLoading: false,
            dialogTeacherVisible: false,
            dialogAddClassVisible: false,
            dialogEditClassVisible: false,
            addSelectArr: [0, 0],
            form: {},
            editForm: {
                // 初始化，否则视图不会更新
                begin_id: null,
                address_id: null,
                year: null,
                term: null,
                grade: null,
                max_selected_person: null
            },
            college: {college_id: 0},
            nature: {nature_id: 0},
            colleges: [],
            natures: []
        };
    },
    created() {
        this.getData();
    },
    mounted() {},
    components: {},
    methods: {
        getData() {
            this.initDate();
            this.initInfo();
            this.getBeginClassData();
            this.getBeginClassSwitch();
            this.getInputGradeSwitch();
            this.getAddressData();
            this.getDateData();
        },
        initDate() {
            let now = new Date();
            this.year = String(now.getFullYear());
            let month = now.getMonth();
            if (month >= 9 && month < 2) {
                this.term = '1';
            } else {
                this.term = '2';
            }
        },
        initInfo() {
            this.getNatures();
            this.getColleges();
        },
        // 新增开课
        addBeginClass() {
            this.dialogCourseVisible = true;
            // 获取信息
            this.getCourseData();
        },
        // 编辑 此处不修改 老师和课程
        editBeginClass(row) {
            console.log(row);
            // this.editForm = JSON.parse(JSON.stringify(row));
            this.editForm.grade = row.grade;
            this.editForm.year = row.course_year;
            this.editForm.max_selected_person = row.max_selected_person;
            // 获取地址选择
            let index = this.address.findIndex(addr => addr.address_name == row.course_address);
            this.editForm.address_id = this.address[index].id;
            // 获取学期选择
            this.editForm.term = Number(row.course_term);
            // 获取 begin_id
            this.editForm.begin_id = row.course_id;
            // 老师和课程id 设为空
            this.course_id = null;
            this.teacher_id = null;
            this.dialogEditClassVisible = true;
        },
        // 学年和学期改变
        queryOpenChange() {
            this.getBeginClassData();
        },
        // 完成新增操作
        complete() {
            postRequest('/login/admin/openclass/insert_begin_class', this.form).then(res => {
                if (res.code === 200) {
                    this.$message.success('新增开课成功!');
                    this.getBeginClassData();
                } else {
                    this.$message.error('开课失败!');
                }
                this.dialogAddClassVisible = false;
            });
        },
        // 确认修改
        confirmEdit() {
            let updateClass = JSON.parse(JSON.stringify(this.editForm));
            postRequest('/login/admin/openclass/update_begin_class', updateClass).then(res => {
                if (res.code === 200) {
                    this.$message.success('修改开课信息成功!');
                    this.getBeginClassData();
                } else {
                    this.$message.error('修改失败!');
                }
                this.dialogEditClassVisible = false;
            });
        },
        // 1 进入教师选择 2 进入开课选择
        nextStep(val) {
            if (val === 1) {
                if (!this.form.course_id) {
                    this.$message.error('您还未选择课程！');
                    return;
                }
                this.teacherLoading = true;
                getRequest('/login/admin/teacher/getteainfo', {
                    current_page: this.teacherCurrentPage,
                    itemsofpage: this.teacherPageSize
                }).then(res => {
                    this.teacherData = res.data.content;
                    this.teacherPages = res.data.total_pages;
                    this.dialogCourseVisible = false;
                    this.dialogTeacherVisible = true;
                    this.teacherLoading = false;
                    // 预设选择
                    this.$refs.teacherTable.setCurrentRow(this.teacherData[this.addSelectArr[1]]);
                });
            } else if (val === 2) {
                if (!this.form.teacher_id) {
                    this.$message.error('您还未选择老师！');
                    return;
                }
                this.form.year = this.currentYear;
                this.dialogTeacherVisible = false;
                this.dialogAddClassVisible = true;
            }
        },
        // 0 返回课程选择 1 返回教师选择
        lastStep(val) {
            if (val === 0) {
                this.$refs.courseTable.setCurrentRow(this.courseData[this.addSelectArr[0]]);
                this.dialogTeacherVisible = false;
                this.dialogCourseVisible = true;
            } else if (val === 1) {
                this.dialogAddClassVisible = false;
                this.dialogTeacherVisible = true;
            }
        },
        // 选择课程改变
        handleCurrentCourseChange(row) {
            if (row.course_id) {
                let index = this.courseData.findIndex(course => course.course_id === row.course_id);
                this.addSelectArr[0] = index;
                this.form.course_id = row.course_id;
            }
        },
        // 当前选中老师改变
        handleCurrentTeacherChange(row) {
            if (row.id) {
                let index = this.teacherData.findIndex(teacher => teacher.id === row.id);
                this.addSelectArr[1] = index;
                this.form.teacher_id = Number(row.id);
            }
        },
        // 课程页面数量改变
        handleCourseSizeChange(size) {
            this.coursePageSize = size;
            this.getCourseData();
            // 清空course选择
            this.$refs.courseTable.setCurrentRow();
            this.form.course_id = null;
        },
        // 课程当前页面改变
        handleCourseCurrentPageChange(page) {
            this.courseCurrentPage = page;
            this.getCourseData();
            this.$refs.courseTable.setCurrentRow();
            this.form.course_id = null;
        },
        handleTeacherSizeChange(size) {
            this.teacherPageSize = size;
            this.getTeacherData();
        },
        handleTeacherCurrentPageChange(page) {
            this.teacherCurrentPage = page;
            this.getTeacherData();
        },
        handleBeginClassSizeChange(size) {
            this.itemOfPage = size;
            this.getBeginClassData();
        },
        handleBeginClassPageChange(page) {
            this.currentPage = page;
            this.getBeginClassData();
        },
        getBeginClassData() {
            this.tableOpenClassLoading = true;
            getRequest('/login/admin/openclass/get_begin_class', {
                current_page: this.currentPage,
                itemsofpage: this.itemOfPage,
                term: this.term,
                year: this.year
            }).then(res => {
                if (res.code == 200) {
                    this.classTable = res.data.content;
                    this.classPages = res.data.total_pages;
                    this.tableOpenClassLoading = false;
                }
            });
        },
        getBeginClassSwitch() {
            getRequest('/login/admin/openclass/get_begin_class_switch').then(res => {
                // 1 开放 0 未开放
                if (res.data == 1) {
                    this.openClassSelect = true;
                } else if (res.data == 0) {
                    this.openClassSelect = false;
                }
            });
        },
        getInputGradeSwitch() {
            getRequest('/login/admin/grade/get_grade_switch').then(res => {
                if (res.data == 1) {
                    this.openGradeInput = true;
                } else if (res.data == 0) {
                    this.openGradeInput = false;
                }
            });
        },
        changeClassSelect() {
            postRequest('/login/admin/openclass/set_begin_class_switch').then(res => {
                if (res.code === 200) {
                    if (this.openClassSelect) {
                        this.$message.success('打开开课通道成功！');
                    } else {
                        this.$message.info('关闭开课通道成功！');
                    }
                } else {
                    this.$message.error('开课通道状态修改失败!');
                    this.openClassSelect = !this.openClassSelect;
                }
            });
        },
        changeGradeInput() {
            postRequest('/login/admin/grade/set_grade_switch').then(res => {
                if (res.code === 200) {
                    if (this.openGradeInput) {
                        this.$message.success('打开录入通道成功！');
                    } else {
                        this.$message.info('关闭录入通道成功！');
                    }
                } else {
                    this.$message.error('录入通道状态修改失败!');
                    this.openGradeInput = !this.openGradeInput;
                }
            });
        },
        getAddressData() {
            getRequest('/public/baseinfo/address/getall').then(res => {
                this.address = res.data;
            });
        },
        getCurrentGrades() {
            let year = new Date().getFullYear();
            let arr = [];
            for (let i = 3; i >= 0; i--) {
                arr.push(year - i);
            }
            return arr;
        },
        getDateData() {
            this.currentYear = new Date().getFullYear();
            this.currentGrades = this.getCurrentGrades();
        },
        // 获取课程数据
        getCourseData() {
            this.courseLoading = true;
            getRequest('/public/course/getall', { current_page: this.courseCurrentPage, itemsofpage: this.coursePageSize }).then(res => {
                this.courseData = res.data.courses;
                this.coursePages = res.data.total_pages;
                this.courseLoading = false;
            });
        },
        // 获取教师数据
        getTeacherData() {
            this.teacherLoading = true;
            getRequest('/login/admin/teacher/getteainfo', {
                current_page: this.teacherCurrentPage,
                itemsofpage: this.teacherPageSize
            }).then(res => {
                this.teacherData = res.data.content;
                this.teacherPages = res.data.total_pages;
                this.teacherLoading = false;
                // 预设选择置空
                this.$refs.teacherTable.setCurrentRow();
                this.form.teacher_id = null;
            });
        },
        // 获取 全部课程类型
        getNatures() {
            getRequest('/public/course/getnature').then(res => {
                this.natures = res.data;
            });
        },
        // 获取 全部学院信息
        getColleges() {
            getRequest('/public/baseinfo/college/getall').then(res => {
                this.colleges = res.data;
            });
        }, // select查询变化时
        queryChange() {
            this.courseCurrentPage = 1;
            getRequest('/public/course/getbyunion', {
                college_id: this.college.college_id,
                major_id: 0,
                nature_id: this.nature.nature_id,
                itemsofpage: this.coursePageSize,
                current_page: 1
            }).then(res => {
                this.courseData = res.data.courses;
                this.coursePages = res.data.total_pages;
            });
            // 重置选择
            this.$refs.courseTable.setCurrentRow();
            this.form.course_id = null;
        },
        // select查询清空时
        queryClear() {
            if (!this.nature) {
                this.nature = { nature_id: 0 };
            } else if (!this.college) {
                this.college = { college_id: 0 };
            }
            this.getCourseData();

            this.$refs.courseTable.setCurrentRow();
            this.form.course_id = null;
        },
    }
};
</script>

<style>
.text {
    font-weight: bold;
    font-size: 16px;
}
.switch {
    width: 40%;
    display: inline-block;
}
.operating {
    float: right;
    display: inline-block;
    margin: 10px;
}
.pagination {
    right: 20px;
    margin: 10px;
}
.step-btn {
    float: right;
    /* position: relative; */
}
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 110px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
}
</style>
